<template>
	<view class="page-container">
		<!-- 页面消息 -->
		<NotifyContent :notifyText="notifyText" :notifyUser="notifyUser" v-if="showNotify" />
		<view v-if="showHeader" class="page-header" :style="[pageHeaderStyle]">
			<view class="header-slot-content">
				<slot name="header"></slot>
			</view>
			<view class="header-default-content flex-row-between">
				<view>
					<view v-if="showBack" class="flex-row" @click="backEvent">
						<u-icon size="32" name="arrow-left"></u-icon>
						<text class="global-page-title line-clamp1">{{name}}</text>
					</view>
				</view>
				<slot name="header-right"></slot>
			</view>
		</view>
		<view class="page-content" :style="[pageContentStyle]">
			<slot></slot>
		</view>
		<view v-if="showFooter" class="page-footer">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	import NotifyContent from './NotifyContent.vue';
	export default {
		components: {
			NotifyContent
		},
		props: {
			name: {
				type: String,
				default: ''
			},
			bgStyle: {
				type: Object,
				default: () => ({}),
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			showFooter: {
				type: Boolean,
				default: false,
			},
			showBack: {
				type: Boolean,
				default: true,
			},
			showHeader: {
				type: Boolean,
				default: true,
			},
			headerColor: {
				type: String,
				default: '#fafafa'
			},
			beforeBack: {
				type: Function,
				default: null,
			}
		},
		computed: {
			pageHeaderStyle() {
				const {
					top,
					left,
					height,
				} = this.menuButtonInfo;
				const style = {
					// 状态栏颜色
					borderTop: `${this.systemBarHeight}px solid transparent`,
					backgroundColor: this.headerColor,
					// APP 标题栏高度
					height: `calc(${this.systemBarHeight}px + 120rpx)`,
				}
				// 小程序重新计算标题栏部分样式
				if (height) {
					// 小程序胶囊菜单外边距
					const padding = 2 * (top - this.systemBarHeight);
					style.paddingRight = `calc(100% - ${left - 8}px)`;
					// 标题栏高度 = 状态栏高度 + 小程序胶囊菜单高度 + 内边距（小程序胶囊菜单外边距）
					style.height = `${this.systemBarHeight + height + padding}px`;
				}
				return style;
			},
			pageContentStyle() {
				const style = {
					...this.bgStyle,
					paddingBottom: '120rpx',
					backgroundColor: this.bgColor,
					minHeight: `calc(100vh - ${this.calcHeight}px)`
				}
				return style;
			}
		},
		data() {
			return {
				calcHeight: 0,
				notifyRef: null,
				showNotify: false,
				notifyText: '',
				notifyUser: {},
				menuButtonInfo: {},
				systemBarHeight: 0,
			}
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				// #ifdef MP-WEIXIN || APP
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
				// #endif

				// #ifdef MP-WEIXIN
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// #endif
			},
			backEvent() {
				if (typeof this.beforeBack === 'function') {
					const isBack = this.beforeBack();
					if (!isBack) {
						return;
					}
				}
				uni.navigateBack();
			}
		},
		created() {
			this.getSysteminfo();
		},
		mounted() {
			//websocket消息
			// this.$socket.getMessage(message => {
			// 	const val = JSON.parse(message.data);
			// 	this.notifyUser = val.profileVo;
			// 	this.notifyText = val.text;
			// 	// 显示消息提示
			// 	uni.showTabBarRedDot({
			// 		index: 2,
			// 	})
			// 	this.showNotify = true;
			// 	this.notifyRef && clearTimeout(this.notifyRef);
			// 	this.notifyRef = setTimeout(() => {
			// 		this.showNotify = false;
			// 	}, 3000)
			// })

			this.$nextTick(() => {
				uni.createSelectorQuery().select('.page-footer').boundingClientRect(data => {
					if (data?.height) {
						this.calcHeight += data.height;
					}
				}).exec()
				uni.createSelectorQuery().select('.page-header').boundingClientRect(data => {
					if (data?.height) {
						this.calcHeight += data.height;
					}
				}).exec()
			})
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		display: flex;
		flex-direction: column;

		.page-header {
			display: flex;
			position: sticky;
			top: 0;
			width: 100vw;
			box-sizing: border-box;
			padding: 0 30rpx;
			z-index: 500;

			.header-default-content {
				display: none;

				.global-page-title {
					margin-left: 36rpx;
				}
			}

			.header-slot-content:not(:empty) {
				width: 100%;
			}

			.header-slot-content:empty+.header-default-content {
				width: 100%;
				display: flex;
			}
		}

		.page-content {
			padding: 0 30rpx;
			box-sizing: border-box;
			overflow: scroll;
		}

		.page-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			background-color: #fafafa;
			z-index: 500;
		}
	}
</style>